<template>
	<view class="services-container">
		<!-- 快捷服务 -->
		<view class="quick-services">
			<view class="section-title">便民服务</view>
			<view class="services-grid">
				<view class="service-item" v-for="service in quickServices" :key="service.id" @click="handleServiceClick(service)">
					<view class="service-icon" :style="{ backgroundColor: service.color }">
						<text class="iconfont" :class="service.icon"></text>
					</view>
					<view class="service-name">{{ service.name }}</view>
					<view class="service-status" v-if="service.status">{{ service.status }}</view>
				</view>
			</view>
		</view>

		<!-- 实时信息 -->
		<view class="realtime-info">
			<view class="section-title">实时信息</view>
			<view class="info-cards">
				<view class="info-card" @click="showParkingDetail">
					<view class="card-header">
						<text class="iconfont icon-car"></text>
						<view class="card-title">停车场</view>
						<view class="card-more">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="card-content">
						<view class="parking-stats">
							<view class="stat-item">
								<view class="stat-value">{{ parkingInfo.available }}</view>
								<view class="stat-label">可用车位</view>
							</view>
							<view class="stat-divider"></view>
							<view class="stat-item">
								<view class="stat-value">{{ parkingInfo.total }}</view>
								<view class="stat-label">总车位</view>
							</view>
						</view>
						<view class="parking-rate">
							<view class="rate-bar">
								<view class="rate-fill" :style="{ width: parkingInfo.occupancyRate + '%' }"></view>
							</view>
							<view class="rate-text">使用率 {{ parkingInfo.occupancyRate }}%</view>
						</view>
					</view>
				</view>

				<view class="info-card" @click="showQueueInfo">
					<view class="card-header">
						<text class="iconfont icon-queue"></text>
						<view class="card-title">排队情况</view>
						<view class="card-more">
							<text class="iconfont icon-arrow-right"></text>
						</view>
					</view>
					<view class="card-content">
						<view class="queue-list">
							<view class="queue-item" v-for="queue in queueInfo.slice(0, 3)" :key="queue.id">
								<view class="queue-name">{{ queue.name }}</view>
								<view class="queue-count">{{ queue.waiting }}人排队</view>
								<view class="queue-time">约{{ queue.waitTime }}分钟</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 设施导航 -->
		<view class="facility-navigation">
			<view class="section-title">设施导航</view>
			<view class="facility-categories">
				<view 
					class="category-item" 
					v-for="category in facilityCategories" 
					:key="category.id"
					:class="{ 'active': selectedCategory === category.id }"
					@click="switchCategory(category.id)"
				>
					<text class="iconfont" :class="category.icon"></text>
					<text class="category-name">{{ category.name }}</text>
				</view>
			</view>
			<view class="facility-list">
				<view class="facility-item" v-for="facility in currentFacilities" :key="facility.id" @click="navigateToFacility(facility)">
					<view class="facility-info">
						<view class="facility-name">{{ facility.name }}</view>
						<view class="facility-desc">{{ facility.description }}</view>
						<view class="facility-location">{{ facility.location }}</view>
						<view class="facility-hours" v-if="facility.hours">营业时间：{{ facility.hours }}</view>
					</view>
					<view class="facility-actions">
						<view class="facility-distance" v-if="facility.distance">{{ facility.distance }}m</view>
						<view class="facility-status" :class="facility.status">{{ getFacilityStatusText(facility.status) }}</view>
						<text class="iconfont icon-navigation"></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 就医指南 -->
		<view class="medical-guide">
			<view class="section-title">就医指南</view>
			<view class="guide-items">
				<view class="guide-item" v-for="guide in medicalGuides" :key="guide.id" @click="showGuideDetail(guide)">
					<view class="guide-icon">
						<text class="iconfont" :class="guide.icon"></text>
					</view>
					<view class="guide-content">
						<view class="guide-title">{{ guide.title }}</view>
						<view class="guide-desc">{{ guide.description }}</view>
					</view>
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
		</view>

		<!-- 意见反馈 -->
		<view class="feedback-section">
			<view class="section-title">意见反馈</view>
			<view class="feedback-form">
				<view class="form-item">
					<view class="form-label">反馈类型</view>
					<picker mode="selector" :value="feedbackTypeIndex" :range="feedbackTypes" @change="onFeedbackTypeChange">
						<view class="picker-value">{{ feedbackTypes[feedbackTypeIndex] }}</view>
					</picker>
				</view>
				<view class="form-item">
					<view class="form-label">反馈内容</view>
					<textarea 
						class="feedback-textarea" 
						placeholder="请详细描述您的意见或建议..."
						v-model="feedbackContent"
						maxlength="500"
					></textarea>
					<view class="char-count">{{ feedbackContent.length }}/500</view>
				</view>
				<view class="form-item">
					<view class="form-label">联系方式（可选）</view>
					<input 
						class="feedback-input" 
						type="text" 
						placeholder="手机号或邮箱"
						v-model="feedbackContact"
					/>
				</view>
				<button class="submit-btn" @click="submitFeedback" :disabled="!feedbackContent.trim()">
					提交反馈
				</button>
			</view>
		</view>

		<!-- 停车详情弹窗 -->
		<uni-popup ref="parkingPopup" type="bottom">
			<view class="parking-detail">
				<view class="detail-header">
					<view class="detail-title">停车场详情</view>
					<view class="detail-close" @click="closeParkingDetail">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="detail-content">
					<view class="parking-areas">
						<view class="area-item" v-for="area in parkingAreas" :key="area.id">
							<view class="area-info">
								<view class="area-name">{{ area.name }}</view>
								<view class="area-location">{{ area.location }}</view>
							</view>
							<view class="area-stats">
								<view class="available-count">{{ area.available }}/{{ area.total }}</view>
								<view class="area-status" :class="area.status">{{ area.statusText }}</view>
							</view>
							<view class="area-action" @click="navigateToParkingArea(area)">
								<text class="iconfont icon-navigation"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 排队详情弹窗 -->
		<uni-popup ref="queuePopup" type="bottom">
			<view class="queue-detail">
				<view class="detail-header">
					<view class="detail-title">排队详情</view>
					<view class="detail-close" @click="closeQueueDetail">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="detail-content">
					<view class="queue-list-detail">
						<view class="queue-item-detail" v-for="queue in queueInfo" :key="queue.id">
							<view class="queue-header">
								<view class="queue-name">{{ queue.name }}</view>
								<view class="queue-location">{{ queue.location }}</view>
							</view>
							<view class="queue-stats">
								<view class="stat-group">
									<view class="stat-value">{{ queue.waiting }}</view>
									<view class="stat-label">排队人数</view>
								</view>
								<view class="stat-group">
									<view class="stat-value">{{ queue.waitTime }}</view>
									<view class="stat-label">预计等待(分钟)</view>
								</view>
								<view class="stat-group">
									<view class="stat-value">{{ queue.serving }}</view>
									<view class="stat-label">正在服务</view>
								</view>
							</view>
							<view class="queue-trend">
								<text class="trend-text">较昨日同期</text>
								<text class="trend-value" :class="queue.trend > 0 ? 'increase' : 'decrease'">
									{{ queue.trend > 0 ? '+' : '' }}{{ queue.trend }}%
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 指南详情弹窗 -->
		<uni-popup ref="guidePopup" type="bottom">
			<view class="guide-detail" v-if="selectedGuide">
				<view class="detail-header">
					<view class="detail-title">{{ selectedGuide.title }}</view>
					<view class="detail-close" @click="closeGuideDetail">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="detail-content">
					<view class="guide-content-detail">
						<view class="guide-steps" v-if="selectedGuide.steps">
							<view class="step-item" v-for="(step, index) in selectedGuide.steps" :key="index">
								<view class="step-number">{{ index + 1 }}</view>
								<view class="step-content">
									<view class="step-title">{{ step.title }}</view>
									<view class="step-desc">{{ step.description }}</view>
									<view class="step-tips" v-if="step.tips">
										<text class="tips-label">贴心提示：</text>
										<text class="tips-content">{{ step.tips }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="guide-notes" v-if="selectedGuide.notes">
							<view class="notes-title">注意事项</view>
							<view class="notes-content">
								<text class="note-item" v-for="(note, index) in selectedGuide.notes" :key="index">
									{{ index + 1 }}. {{ note }}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
	name: 'ServicesPage',
	data() {
		return {
			selectedCategory: 'dining',
			feedbackTypeIndex: 0,
			feedbackContent: '',
			feedbackContact: '',
			selectedGuide: null,
			feedbackTypes: ['服务建议', '设施报修', '投诉举报', '功能优化', '其他'],
			quickServices: [
				{
					id: 'parking',
					name: '停车查询',
					icon: 'icon-car',
					color: '#007AFF',
					status: '237个空位'
				},
				{
					id: 'dining',
					name: '餐厅美食',
					icon: 'icon-restaurant',
					color: '#FF9500',
					status: '营业中'
				},
				{
					id: 'atm',
					name: 'ATM取款',
					icon: 'icon-atm',
					color: '#34C759',
					status: '5台可用'
				},
				{
					id: 'pharmacy',
					name: '药房',
					icon: 'icon-pharmacy',
					color: '#FF3B30',
					status: '24小时'
				},
				{
					id: 'wifi',
					name: '免费WiFi',
					icon: 'icon-wifi',
					color: '#5856D6',
					status: '已连接'
				},
				{
					id: 'charging',
					name: '充电站',
					icon: 'icon-charging',
					color: '#FF2D92',
					status: '12个空位'
				},
				{
					id: 'wheelchair',
					name: '轮椅借用',
					icon: 'icon-wheelchair',
					color: '#8E8E93',
					status: '可借用'
				},
				{
					id: 'lost',
					name: '失物招领',
					icon: 'icon-lost',
					color: '#FF6B35',
					status: '3件物品'
				}
			],
			facilityCategories: [
				{ id: 'dining', name: '餐饮', icon: 'icon-restaurant' },
				{ id: 'shopping', name: '购物', icon: 'icon-shopping' },
				{ id: 'finance', name: '金融', icon: 'icon-bank' },
				{ id: 'convenience', name: '便民', icon: 'icon-service' }
			],
			medicalGuides: [
				{
					id: 'first_visit',
					title: '初次就诊指南',
					description: '首次来院就诊的完整流程',
					icon: 'icon-guide',
					steps: [
						{
							title: '准备证件',
							description: '携带身份证、医保卡等有效证件',
							tips: '建议提前在线预约挂号，避免现场排队'
						},
						{
							title: '挂号缴费',
							description: '到挂号处或自助机挂号缴费',
							tips: '可使用微信、支付宝等移动支付方式'
						},
						{
							title: '候诊就诊',
							description: '按时到指定科室候诊，听从医护人员安排',
							tips: '请保持安静，配合医生检查'
						}
					],
					notes: [
						'请提前30分钟到达医院',
						'就诊时请如实告知病情',
						'请遵守医院相关规章制度'
					]
				},
				{
					id: 'online_services',
					title: '线上服务使用',
					description: '各种线上便民服务的使用方法',
					icon: 'icon-online',
					steps: [
						{
							title: '微信关注',
							description: '关注医院官方微信公众号',
							tips: '可获取最新医院资讯和服务'
						},
						{
							title: '功能使用',
							description: '预约挂号、报告查询、费用查询等',
							tips: '支持多种便民服务功能'
						}
					]
				},
				{
					id: 'emergency',
					title: '急诊就医须知',
					description: '紧急情况下的就医流程',
					icon: 'icon-emergency',
					steps: [
						{
							title: '紧急处理',
							description: '生命体征不稳定请直接到急诊科',
							tips: '急诊科24小时接诊'
						},
						{
							title: '优先原则',
							description: '急诊按病情严重程度分级救治',
							tips: '请理解和配合医护人员的安排'
						}
					]
				}
			]
		}
	},
	computed: {
		...mapState('services', [
			'parkingInfo', 
			'queueInfo', 
			'parkingAreas',
			'facilities'
		]),
		currentFacilities() {
			return this.facilities.filter(facility => facility.category === this.selectedCategory)
		}
	},
	onLoad() {
		this.initPage()
	},
	onShow() {
		this.refreshData()
	},
	onPullDownRefresh() {
		this.refreshData().finally(() => {
			uni.stopPullDownRefresh()
		})
	},
	methods: {
		...mapActions('services', [
			'loadParkingInfo',
			'loadQueueInfo', 
			'loadFacilities',
			'submitFeedbackAction'
		]),

		async initPage() {
			await this.loadInitialData()
		},

		async loadInitialData() {
			try {
				await Promise.all([
					this.loadParkingInfo(),
					this.loadQueueInfo(),
					this.loadFacilities()
				])
			} catch (error) {
				console.error('数据加载失败:', error)
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				})
			}
		},

		async refreshData() {
			await this.loadInitialData()
		},

		// 快捷服务处理
		handleServiceClick(service) {
			switch (service.id) {
				case 'parking':
					this.showParkingDetail()
					break
				case 'dining':
					this.switchCategory('dining')
					break
				case 'atm':
					this.switchCategory('finance')
					break
				case 'pharmacy':
					this.navigateToPharmacy()
					break
				case 'wifi':
					this.showWiFiInfo()
					break
				case 'charging':
					this.switchCategory('convenience')
					break
				case 'wheelchair':
					this.showWheelchairInfo()
					break
				case 'lost':
					this.showLostAndFound()
					break
			}
		},

		// 停车详情
		showParkingDetail() {
			this.$refs.parkingPopup.open()
		},

		closeParkingDetail() {
			this.$refs.parkingPopup.close()
		},

		navigateToParkingArea(area) {
			uni.navigateTo({
				url: `/pages/navigation/index?target=parking&areaId=${area.id}`
			})
		},

		// 排队详情
		showQueueInfo() {
			this.$refs.queuePopup.open()
		},

		closeQueueDetail() {
			this.$refs.queuePopup.close()
		},

		// 设施分类
		switchCategory(categoryId) {
			this.selectedCategory = categoryId
		},

		navigateToFacility(facility) {
			uni.navigateTo({
				url: `/pages/navigation/index?target=facility&facilityId=${facility.id}`
			})
		},

		// 就医指南
		showGuideDetail(guide) {
			this.selectedGuide = guide
			this.$refs.guidePopup.open()
		},

		closeGuideDetail() {
			this.$refs.guidePopup.close()
		},

		// 反馈功能
		onFeedbackTypeChange(e) {
			this.feedbackTypeIndex = e.detail.value
		},

		async submitFeedback() {
			if (!this.feedbackContent.trim()) {
				uni.showToast({
					title: '请输入反馈内容',
					icon: 'none'
				})
				return
			}

			try {
				uni.showLoading({ title: '提交中...' })
				
				await this.submitFeedbackAction({
					type: this.feedbackTypes[this.feedbackTypeIndex],
					content: this.feedbackContent,
					contact: this.feedbackContact
				})

				uni.hideLoading()
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})

				// 清空表单
				this.feedbackContent = ''
				this.feedbackContact = ''
				this.feedbackTypeIndex = 0

			} catch (error) {
				uni.hideLoading()
				uni.showToast({
					title: '提交失败',
					icon: 'none'
				})
			}
		},

		// 特殊服务
		navigateToPharmacy() {
			uni.navigateTo({
				url: '/pages/navigation/index?target=pharmacy'
			})
		},

		showWiFiInfo() {
			uni.showModal({
				title: 'WiFi信息',
				content: '网络名称：Hospital-Free\n密码：无需密码\n\n已为您自动连接到医院免费WiFi',
				showCancel: false
			})
		},

		showWheelchairInfo() {
			uni.showModal({
				title: '轮椅借用',
				content: '借用地点：门诊大厅服务台\n借用时间：24小时\n\n请携带有效证件办理借用手续',
				showCancel: false,
				confirmText: '前往借用',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/navigation/index?target=service_desk'
						})
					}
				}
			})
		},

		showLostAndFound() {
			uni.navigateTo({
				url: '/pages/services/lost-found'
			})
		},

		// 工具方法
		getFacilityStatusText(status) {
			const statusMap = {
				'open': '营业中',
				'closed': '已关闭',
				'busy': '人较多',
				'available': '可使用'
			}
			return statusMap[status] || status
		}
	}
}
</script>

<style lang="scss" scoped>
.services-container {
	background-color: #f8f9fa;
	min-height: 100vh;
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 24rpx;
}

.quick-services {
	background: white;
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	
	.services-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 32rpx;
	}
	
	.service-item {
		text-align: center;
		
		.service-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			margin: 0 auto 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 32rpx;
		}
		
		.service-name {
			font-size: 24rpx;
			color: #1a1a1a;
			margin-bottom: 8rpx;
		}
		
		.service-status {
			font-size: 20rpx;
			color: #666;
		}
	}
}

.realtime-info {
	background: white;
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	
	.info-cards {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}
	
	.info-card {
		border: 1rpx solid #f0f0f0;
		border-radius: 16rpx;
		padding: 24rpx;
		
		.card-header {
			display: flex;
			align-items: center;
			gap: 16rpx;
			margin-bottom: 20rpx;
			
			.iconfont {
				color: #007AFF;
				font-size: 32rpx;
			}
			
			.card-title {
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				color: #1a1a1a;
			}
			
			.card-more .iconfont {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.card-content {
			.parking-stats {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.stat-item {
					text-align: center;
					
					.stat-value {
						font-size: 36rpx;
						font-weight: 700;
						color: #007AFF;
						line-height: 1.2;
					}
					
					.stat-label {
						font-size: 20rpx;
						color: #666;
						margin-top: 4rpx;
					}
				}
				
				.stat-divider {
					width: 2rpx;
					height: 60rpx;
					background: #f0f0f0;
					margin: 0 40rpx;
				}
			}
			
			.parking-rate {
				.rate-bar {
					height: 8rpx;
					background: #f0f0f0;
					border-radius: 4rpx;
					overflow: hidden;
					margin-bottom: 12rpx;
					
					.rate-fill {
						height: 100%;
						background: #007AFF;
						transition: width 0.3s;
					}
				}
				
				.rate-text {
					font-size: 24rpx;
					color: #666;
					text-align: center;
				}
			}
			
			.queue-list {
				.queue-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 16rpx 0;
					border-bottom: 1rpx solid #f0f0f0;
					
					&:last-child {
						border-bottom: none;
					}
					
					.queue-name {
						font-size: 24rpx;
						color: #1a1a1a;
						font-weight: 500;
					}
					
					.queue-count {
						font-size: 20rpx;
						color: #FF9500;
					}
					
					.queue-time {
						font-size: 20rpx;
						color: #666;
					}
				}
			}
		}
	}
}

.facility-navigation {
	background: white;
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	
	.facility-categories {
		display: flex;
		gap: 16rpx;
		margin-bottom: 32rpx;
		
		.category-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8rpx;
			padding: 24rpx 20rpx;
			border: 2rpx solid #f0f0f0;
			border-radius: 16rpx;
			flex: 1;
			
			&.active {
				border-color: #007AFF;
				background: #f0f9ff;
				
				.iconfont,
				.category-name {
					color: #007AFF;
				}
			}
			
			.iconfont {
				font-size: 32rpx;
				color: #666;
			}
			
			.category-name {
				font-size: 20rpx;
				color: #666;
			}
		}
	}
	
	.facility-list {
		.facility-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.facility-info {
				flex: 1;
				
				.facility-name {
					font-size: 28rpx;
					color: #1a1a1a;
					font-weight: 500;
					margin-bottom: 8rpx;
				}
				
				.facility-desc {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 8rpx;
				}
				
				.facility-location {
					font-size: 20rpx;
					color: #999;
					margin-bottom: 4rpx;
				}
				
				.facility-hours {
					font-size: 20rpx;
					color: #FF9500;
				}
			}
			
			.facility-actions {
				text-align: right;
				
				.facility-distance {
					font-size: 20rpx;
					color: #007AFF;
					margin-bottom: 8rpx;
				}
				
				.facility-status {
					font-size: 20rpx;
					margin-bottom: 8rpx;
					
					&.open {
						color: #34C759;
					}
					
					&.closed {
						color: #999;
					}
					
					&.busy {
						color: #FF9500;
					}
				}
				
				.iconfont {
					color: #007AFF;
					font-size: 24rpx;
				}
			}
		}
	}
}

.medical-guide {
	background: white;
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	
	.guide-items {
		.guide-item {
			display: flex;
			align-items: center;
			gap: 24rpx;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.guide-icon {
				width: 64rpx;
				height: 64rpx;
				border-radius: 12rpx;
				background: #007AFF;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 28rpx;
			}
			
			.guide-content {
				flex: 1;
				
				.guide-title {
					font-size: 28rpx;
					color: #1a1a1a;
					font-weight: 500;
					margin-bottom: 8rpx;
				}
				
				.guide-desc {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.icon-arrow-right {
				color: #999;
				font-size: 24rpx;
			}
		}
	}
}

.feedback-section {
	background: white;
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	
	.feedback-form {
		.form-item {
			margin-bottom: 32rpx;
			
			.form-label {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 16rpx;
			}
			
			.picker-value {
				padding: 24rpx;
				background: #f8f9fa;
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #1a1a1a;
			}
			
			.feedback-textarea {
				width: 100%;
				min-height: 200rpx;
				padding: 24rpx;
				background: #f8f9fa;
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #1a1a1a;
				line-height: 1.6;
				box-sizing: border-box;
			}
			
			.char-count {
				font-size: 20rpx;
				color: #999;
				text-align: right;
				margin-top: 8rpx;
			}
			
			.feedback-input {
				width: 100%;
				padding: 24rpx;
				background: #f8f9fa;
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #1a1a1a;
				box-sizing: border-box;
			}
		}
		
		.submit-btn {
			width: 100%;
			padding: 24rpx;
			background: #007AFF;
			color: white;
			border: none;
			border-radius: 16rpx;
			font-size: 28rpx;
			
			&:disabled {
				background: #ddd;
				color: #999;
			}
		}
	}
}

.parking-detail,
.queue-detail,
.guide-detail {
	background: white;
	border-radius: 24rpx 24rpx 0 0;
	max-height: 80vh;
	
	.detail-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.detail-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #1a1a1a;
		}
		
		.detail-close {
			color: #666;
			font-size: 32rpx;
		}
	}
	
	.detail-content {
		padding: 32rpx;
		max-height: 60vh;
		overflow-y: auto;
	}
}

.parking-areas {
	.area-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.area-info {
			flex: 1;
			
			.area-name {
				font-size: 28rpx;
				color: #1a1a1a;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.area-location {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		.area-stats {
			text-align: center;
			margin: 0 24rpx;
			
			.available-count {
				font-size: 28rpx;
				color: #007AFF;
				font-weight: 600;
				margin-bottom: 4rpx;
			}
			
			.area-status {
				font-size: 20rpx;
				
				&.available {
					color: #34C759;
				}
				
				&.busy {
					color: #FF9500;
				}
				
				&.full {
					color: #FF3B30;
				}
			}
		}
		
		.area-action {
			color: #007AFF;
			font-size: 24rpx;
		}
	}
}

.queue-list-detail {
	.queue-item-detail {
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.queue-header {
			margin-bottom: 16rpx;
			
			.queue-name {
				font-size: 28rpx;
				color: #1a1a1a;
				font-weight: 500;
				margin-bottom: 4rpx;
			}
			
			.queue-location {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		.queue-stats {
			display: flex;
			gap: 40rpx;
			margin-bottom: 16rpx;
			
			.stat-group {
				text-align: center;
				
				.stat-value {
					font-size: 32rpx;
					color: #007AFF;
					font-weight: 600;
					line-height: 1.2;
				}
				
				.stat-label {
					font-size: 20rpx;
					color: #666;
					margin-top: 4rpx;
				}
			}
		}
		
		.queue-trend {
			display: flex;
			align-items: center;
			gap: 16rpx;
			
			.trend-text {
				font-size: 20rpx;
				color: #999;
			}
			
			.trend-value {
				font-size: 20rpx;
				font-weight: 500;
				
				&.increase {
					color: #FF3B30;
				}
				
				&.decrease {
					color: #34C759;
				}
			}
		}
	}
}

.guide-content-detail {
	.guide-steps {
		margin-bottom: 32rpx;
		
		.step-item {
			display: flex;
			gap: 24rpx;
			margin-bottom: 32rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.step-number {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: #007AFF;
				color: white;
				font-size: 24rpx;
				font-weight: 600;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}
			
			.step-content {
				flex: 1;
				
				.step-title {
					font-size: 28rpx;
					color: #1a1a1a;
					font-weight: 500;
					margin-bottom: 12rpx;
				}
				
				.step-desc {
					font-size: 24rpx;
					color: #666;
					line-height: 1.6;
					margin-bottom: 12rpx;
				}
				
				.step-tips {
					padding: 16rpx;
					background: #f0f9ff;
					border-radius: 12rpx;
					
					.tips-label {
						font-size: 20rpx;
						color: #007AFF;
						font-weight: 500;
					}
					
					.tips-content {
						font-size: 20rpx;
						color: #007AFF;
					}
				}
			}
		}
	}
	
	.guide-notes {
		.notes-title {
			font-size: 28rpx;
			color: #1a1a1a;
			font-weight: 500;
			margin-bottom: 16rpx;
		}
		
		.notes-content {
			.note-item {
				display: block;
				font-size: 24rpx;
				color: #666;
				line-height: 1.6;
				margin-bottom: 8rpx;
			}
		}
	}
}
</style> 